import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import rehypeRaw from 'rehype-raw';
import 'highlight.js/styles/github.css';

/**
 * 思考动画组件
 */
function TypingIndicator() {
  return (
    <div className="typing-indicator">
      <span className="typing-dot"></span>
      <span className="typing-dot"></span>
      <span className="typing-dot"></span>
    </div>
  );
}

/**
 * 工具调用展示组件
 */
function ToolCallsDisplay({ toolCalls }) {
  const [isExpanded, setIsExpanded] = useState(false);

  if (!toolCalls || toolCalls.length === 0) return null;

  return (
    <div className="tool-calls-container">
      <div 
        className="tool-calls-header" 
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <span className="tool-icon">🛠️</span>
        <span className="tool-label">调用工具: {toolCalls.map(t => t.name).join(', ')}</span>
        <span className="tool-toggle">{isExpanded ? '▼' : '▶'}</span>
      </div>
      {isExpanded && (
        <div className="tool-calls-content">
          {toolCalls.map((tool, idx) => (
            <div key={idx} className="tool-call-item">
              <div className="tool-call-name">
                <strong>函数:</strong> {tool.name}
              </div>
              {tool.arguments && (
                <div className="tool-call-args">
                  <strong>参数:</strong>
                  <pre>{tool.arguments === '{}' ? '无' : JSON.stringify(JSON.parse(tool.arguments), null, 2)}</pre>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/**
 * 工具结果展示组件
 */
function ToolResultDisplay({ toolResult }) {
  const [isExpanded, setIsExpanded] = useState(false);

  if (!toolResult) return null;

  return (
    <div className="tool-result-container">
      <div 
        className="tool-result-header" 
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <span className="tool-icon">📊</span>
        <span className="tool-label">工具返回: {toolResult.name}</span>
        <span className="tool-toggle">{isExpanded ? '▼' : '▶'}</span>
      </div>
      {isExpanded && (
        <div className="tool-result-content">
          <div className="tool-result-name">
            <strong>函数:</strong> {toolResult.name}
          </div>
          <div className="tool-result-data">
            <strong>返回值:</strong>
            <pre>{toolResult.result}</pre>
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * 消息组件
 */
export default function Message({ role, content, isLoading, toolCalls, toolResult }) {
  const isUser = role === 'USER';
  const isAssistant = role === 'ASSISTANT';
  const isEmpty = !content || content.trim() === '';

  return (
    <div className={`message ${isUser ? 'message-user' : 'message-assistant'}`}>
      <div className="message-avatar">
        {isUser ? '👤' : '🤖'}
      </div>
      <div className="message-content">
        {isAssistant ? (
          <div className="markdown-body">
            {/* 显示工具调用 */}
            {toolCalls && <ToolCallsDisplay toolCalls={toolCalls} />}
            
            {/* 显示工具结果 */}
            {toolResult && <ToolResultDisplay toolResult={toolResult} />}
            
            {/* 显示普通消息内容 */}
            {isEmpty && isLoading ? (
              <TypingIndicator />
            ) : content ? (
              <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                rehypePlugins={[rehypeHighlight, rehypeRaw]}
              >
                {content || ''}
              </ReactMarkdown>
            ) : null}
          </div>
        ) : (
          <div className="text-content">{content}</div>
        )}
      </div>
    </div>
  );
}

